(() => {
	console.log('init');

	function doCheck(params) {

	}

	function initInput() {
		$("#id_item_eid").val(Date.now());
		$("#id_item_name").val("");
		$("#id_item_gender").val("male");
		$("#id_item_age").val("");
	    $("#id_item_email").val("");
		$("#id_item_phone").val("");
		$("#id_item_address").val("");
	}

	function clearInput() {
		$("#id_item_eid").val("");
		$("#id_item_name").val("");
		$("#id_item_gender").val("");
		$("#id_item_age").val("");
	    $("#id_item_email").val("");
		$("#id_item_phone").val("");
		$("#id_item_address").val("");
	}

	function addUser(params) {
		console.log('addUser() params: ' + JSON.stringify(params));

		$.ajax({
			url: "/api/v1/user/add",
			type: "POST",
			data: params,
			success: (data) => {
				console.log('add user success. data: ' + data);

				getAllUser();
			},
			error: (error) => {
				console.log('add user failed. error: ' + error);
			},
			complete: () => {
				initInput();
			}
		});
	}

	function getAllUser() {
		console.log('getAllUser()');

		$.ajax({
			url: "/api/v1/user/getAll",
			type: "GET",
			success: (data) => {
				console.log('get all user success. data: ' + data);

				generateTable(JSON.parse(data));
			},
			error: (error) => {
				console.log('get all user failed. error: ' + error);
			}
		});
	}

	function editUser(params) {
		console.log('editUser() params: ' + JSON.stringify(params));

		// $.ajax({
		// 	url: "/api/v1/user/update",
		// 	type: "POST",
		// 	data: params,
		// 	success: (data) => {
		// 		console.log('update user success. data: ' + data);

		// 		getAllUser();
		// 	},
		// 	error: (error) => {
		// 		console.log('update user failed. error: ' + error);
		// 	},
		// 	complete: () => {
		// 		initInput();
		// 	}
		// });
	}

	function generateTable(data) {
		let textHTML = `
		<table class="table table-bordered">
            <tr>
                <td>EID</td>
                <td>Name</td>
                <td>Gender</td>
                <td>Age</td>
                <td>Email</td>
                <td>Phone</td>
                <td>Address</td>
                <td></td>
                <td></td>
            </tr>`;

        for (let item of data) {
        	textHTML += `
        	<tr>
                <td>${item.eid}</td>
                <td>${item.name}</td>
                <td>${item.gender}</td>
                <td>${item.age}</td>
                <td>${item.email}</td>
                <td>${item.phone}</td>
                <td>${item.address}</td>
                <td><a>Edit</a></td>
                <td><a>Delete</a></td>
            </tr>`;
        }
        textHTML += `</table>`;

        $("#id_user_table")[0].innerHTML = textHTML;
	}

	$("#id_btn_add").click((event) => {
		console.log('add btn clicked.');

		let eid = $("#id_item_eid").val();
		let name = $("#id_item_name").val();
		let gender = $("#id_item_gender").val();
		let age = $("#id_item_age").val();
		let email = $("#id_item_email").val();
		let phone = $("#id_item_phone").val();
		let address = $("#id_item_address").val();

		var params = {
			eid: eid,
			name: name,
			gender: gender,
			age: age,
			email: email,
			phone: phone,
			address: address
		};
		addUser(params);
	});

	$("#id_user_table").click((event) => {
		console.log(event.target.text);

		if (event.target.text.toLowerCase() === 'edit') {

		}
	});

	function init() {
		initInput();

		getAllUser();
	}
	init();
})();